import { Button, Dropdown, Menu, MenuProps } from "antd";
import { DownOutlined, MoreOutlined } from "@ant-design/icons";
import { useLocation, useNavigate } from "react-router-dom";
import { useTranslation } from "react-i18next";
import { HOME_URL } from "@/config/config";
import { setTabsList } from "@/redux/feature/tabSlice";
import { useAppDispatch } from "@/redux";

const MoreButton = (props: any) => {
	const dispatch = useAppDispatch();
	const { t } = useTranslation();
	const { pathname } = useLocation();
	const navigate = useNavigate();

	// close multipleTab
	const closeMultipleTab = (tabPath?: string) => {
		const handleTabsList = props.tabsList.filter((item: Menu.MenuOptions) => {
			if(item.path === tabPath || item.path === HOME_URL){
				return true
			}
			props.removeCache(item.path)
			return false
		});
		dispatch(setTabsList(handleTabsList));
		tabPath ?? navigate(HOME_URL);
	};

	const menu: MenuProps = {
		items: [
			{
				key: "1",
				label: <span>{t("tabs.closeCurrent")}</span>,
				onClick: () => props.delTabs(pathname),
			},
			{
				key: "2",
				label: <span>{t("tabs.closeOther")}</span>,
				onClick: () => closeMultipleTab(pathname),
			},
			{
				key: "3",
				label: <span>{t("tabs.closeAll")}</span>,
				onClick: () => closeMultipleTab(),
			},
		],
	};
	return (
		<Dropdown menu={menu} placement="bottomRight">
			<Button icon={<MoreOutlined />} size="small"></Button>
		</Dropdown>
	);
};
export default MoreButton;
